import React from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import { createForm } from 'rc-form';
import { NavBar, Flex } from 'antd-mobile';
import styles from './RegisterPage.css';
import doctor1x from '../assets/doctor@2x.png';
import patient1x from '../assets/red@2x.png';

function RegisterPage({
  location,
}) {
  const { query } = location;
  return (
    <div className={styles.normal}>
      <NavBar
        mode="light"
        iconName="false"
      ><span style={{ color: '#33333' }}>选择您的身份</span></NavBar>
      <Flex justify="center" className={styles.picFlex}>
        <div className={styles.fatherBox}>
          <Link to={{ pathname: '/doctors', query: { inviteDoctorUid: query.inviteDoctorUid, inviteType: query.inviteType, channel: query.channel } }}><img src={doctor1x} role="presentation" width="80%" height="auto" /></Link>
          <p className={styles.fontStyle}>我是医生</p>
        </div>
      </Flex>
      <Flex justify="center" className={styles.picFlex}>
        <div className={styles.fatherBox}>
          <Link to={{ pathname: '/patients', query: { inviteDoctorUid: query.inviteDoctorUid, inviteType: query.inviteType, channel: query.channel } }}><img src={patient1x} role="presentation" width="80%" height="auto" /></Link>
          <p className={styles.fontStyle}>我是患者</p>
          <p className={styles.fontStyle2}>（注册送<span style={{ color: 'red' }}>300</span>红包呦~）</p>
        </div>
      </Flex>
    </div>
  );
}

function mapStateToProps({ register }) {
  return { register };
}

export default connect(mapStateToProps)(createForm()(RegisterPage));
